<div class="m-2">
    <div class="container-fluid mt-4">
        <div class="row">
            <!-- 可归档列表 -->
            <div class="col-6">
                <h5>待验收的任务</h5>
                <hr>
                <ul class="mt-2 px-0" style="list-style-type: none">
                    {% for _, info in ipairs(tasks) do %}
                    {% if info.status == 4 then %}
                    <li class="d-block text-truncate mw-100 mb-1">
                        <i class="fa fa-clock-o mr-1"></i>{{tostring(info.end_time)}}
                        <a href="#" class="task-link" onclick="return open_task('{{info.id}}');">{{info.name}}</a>
                        <small class="text-muted ml-2 mt-1 pull-right align-baseline">
                            {{info.creator_name}}<i class="fa fa-chevron-right mx-1"></i>{{info.assigned_name}}<i class="fa fa-chevron-right mx-1"></i>{{info.cooperator_name}}
                        </small>
                    </li>
                    {% end %}
                    {% end %}
                </ul>
            </div>

            <!-- 已归档列表 -->
            <div class="col-6">
                <h5>已验收的任务</h5>
                <hr>
                <ul class="mt-2 px-0" style="list-style-type: none">
                    {% for _, info in ipairs(tasks) do %}
                    {% if info.status == 5 then %}
                    <li class="d-block text-truncate mw-100 mb-1">
                        <i class="fa fa-check text-success mr-1"></i>{{tostring(info.end_time)}}
                        <a href="#" class="task-link" onclick="return open_task('{{info.id}}');">{{info.name}}</a>
                        <small class="text-muted ml-2 mt-1 pull-right align-baseline">
                            {{info.creator_name}}<i class="fa fa-chevron-right mx-1"></i>{{info.assigned_name}}<i class="fa fa-chevron-right mx-1"></i>{{info.cooperator_name}}
                        </small>
                    </li>
                    {% end %}
                    {% end %}
                </ul>
            </div>
        </div>
    </div>
</div>

<div id="task-view" class="task-view-pane invisible">
    <div id="task-info-pane">
    </div>
</div>

<script>

var task_info_changed = false;
function open_task(tid, changed) {
    if (changed) task_info_changed = true;

    $('#task-info-pane').empty();
    $('#task-info-pane').get(0).innerHTML = '<div class="text-center text-muted" style="margin-top: 40%"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>';
    $('#task-view').removeClass('invisible');
    $('#task-view').addClass('visible');

    $.post('/dashboard/tasks/readonly_info', { id : tid, enable_archive: true }, function(ret) {
        $('#task-info-pane').empty();
        $('#task-info-pane').append($(ret));
    }, 'html');
}

function close_task() {
    $('#task-view').removeClass('visible');
    $('#task-view').addClass('invisible');

    if (last_filter_menu && task_info_changed) last_filter_menu.click();
}

</script>